<template>
	<view class="box" :style="theme">
		<view class="head flex">
			<image :src="info.courseImage" class="head-l"></image>
			<view class="head-cont">
				<view class="title" :class="info.courseType=='1'?'': 'lv'">
					<text>{{info.courseType=='1'?'团体课':info.courseType=='4'?'私教课': '长期课'}}</text>
					<block>{{info.courseName}}</block>
				</view>
				<view class="money">
					<view class="price flex">
						<view class="ks">
							<text>{{info.courseType!='4'?info.classNum || 0:info.duration || 0}}</text>{{info.courseType=='4'?'分钟':'课时'}}
						</view>
						<view v-if="info.courseType=='4'" class="lx">{{info.classType == 1?'一对多':'一对一'}}</view>
					</view>
				</view>
				<view v-if="info.time" class="info">上课时间：{{info.time }}</view>
				<view class="info">上课地点：{{info.site}}</view>
			</view>
		</view>
		<view class="card mt2">
			<view class="bt">学员信息 </view>
			<view class="student flex-cb" v-for="(item, index) in info.students" :key="index">
				<image :src="imgHost+'/user.png'" class="student-l"></image>
				<view class="student-cnt" bindtap="telbtn">
					<view>{{item.name}}<text>{{item.sex== '1'?'男':item.sex== '2'?'女':'保密'}}</text></view>
					<view>{{item.phone}}</view>
				</view>
				<view @click="qdBtn(item)" class="qdBtn" :class="item.status==0?'on':''">{{item.status==0?'签到':'已签到'}}
				</view>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<view v-if="info.students&&info.students.length>0" class="bottomState">
			<view @click="jump('/pages/member/performance?timeId=',info.timeId)">上传课堂表现</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				info: {},
				id: ''
			}
		},
		onLoad(ops) {
			this.id = ops.id
			this.getDetail(ops.id)
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			qdBtn(e) {
				let that = this
				if (e.status == 0) {


					uni.scanCode({
						success(res) {
							let code = res.result
							if (res.result) {
								that.$app.ajax({
									api: that.$api.studentSignIn(),
									data: {
										param: {
											code
										}
									}
								}).then((res) => {
									if (res.errorCode === '000000') {
										that.$app.showToast('签到成功')
										that.getDetail()
									}
								}).catch(() => {})
							}
						}
					})
				}
				// let status = e.status
				// this.$app.ajax({
				// 	api: this.$api.signInCourse(),
				// 	data: {
				// 		param: {
				// 			memberId: this.userInfo.id,
				// 			venueId: this.venueId,
				// 			recordId: e.recordId,
				// 			courseId: this.info.courseId,
				// 			timeId: this.info.timeId,
				// 			status: e.status == '0' ? '1' : '0',
				// 		}
				// 	}
				// }).then((res) => {
				// 	if (res.errorCode === '000000') {
				// 		let str = '签到成功'
				// 		if (status == '1') {
				// 			str = '取消签到成功'
				// 		}
				// 		this.$app.showToast(str)
				// 		this.getDetail()
				// 	}
				// }).catch(() => {})
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.myCourseDetail(),
					data: {
						param: {
							memberId: this.userInfo.id,
							venueId: this.venueId,
							timeId: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.info = res.record
					}
				}).catch(() => {})
			}
		}

	}
</script>
<style scoped lang="scss">
	.head {
		padding: 392rpx 30rpx 0;
		background-color: #ffffff;
		position: relative;
		box-sizing: border-box;

		.head-l {
			width: 100%;
			height: 422rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.head-cont {
			width: 100%;
			z-index: 100;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 30rpx;

			.title {
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;

				text {
					height: 40rpx;
					line-height: 40rpx;
					background: $color;
					border-radius: 8rpx;
					display: inline-block;
					padding: 0 10rpx;
					margin-right: 20rpx;
					font-size: 22rpx;
					color: #ffff;
				}

			}

			.info {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-top: 15rpx;
				line-height: 1.5;
			}

			.money {
				margin-top: 15rpx;

				.price {
					font-size: 28rpx;

					.je {
						font-size: 36rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: $red;

						text {
							font-weight: bolder;
						}
					}

					.ks {
						font-size: 22rpx;
						color: #666666;
						height: 28rpx;
						line-height: 28rpx;

						text {
							font-size: 30rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #333333;
						}
					}

					.lx {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 18rpx;
						padding-left: 18rpx;
						border-left: 1px solid #E5E5E5;
						height: 28rpx;
						line-height: 28rpx;
					}
				}
			}

		}
	}


	.card {
		padding: 30rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		width: 690rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
	}

	.card .bt {
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 1.5;
	}

	.student {
		margin-top: 30rpx;
	}

	.student-l {
		width: 84rpx;
		height: 84rpx;
		margin-right: 20rpx;
	}

	.student-cnt {
		flex: 1;
		color: #333;
		font-size: 30rpx;
		line-height: 1.5;

		text {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-left: 12rpx;
		}
	}

	.student-cnt view:nth-of-type(2) {
		color: #999999;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.qdBtn {
		width: 108rpx;
		line-height: 52rpx;
		border-radius: 26rpx;
		border: 1rpx solid #999999;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		text-align: center;

		&.on {
			color: $color;
			border-color: $color;
		}
	}

	.bottomState {
		width: 100%;
		padding: 16rpx 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		overflow: hidden;

		view {
			height: 88rpx;
			text-align: center;
			color: #fff;
			background-color: $color;
			font-size: 30rpx;
			border-radius: 10rpx;
			line-height: 88rpx;
		}
	}
</style>